<template>
    <Center>
        <div class="p-4" style="height: 100%;">
            <el-row style="height: 100%;">
                <el-col :span="8" class="p-3">
                    <div class="border-2 flex flex-col" style="height:100%;">
                        <div class="basis-2/3 flex justify-center items-center">
                            <el-image :src="baseUrl + leftGoodsList.image" style="width:350px;height:350px;" />
                        </div>
                        <div class="basis-1/3">
                            <div class="mt-3 text-orange-600 text-sm text-center">{{leftGoodsList.desc}}</div>
                            <div class="mt-3 text-center">{{leftGoodsList.title}}</div>
                            <div class="mt-3 text-center">RMB：{{leftGoodsList.price}}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16" class="flex flex-col">
                    <div class="basis-3/5 flex flex-col">
                        <el-row style="height:100%;">
                            <el-col :span="12" class="p-3" v-for="(item, index) in goodsList" :key="index">
                                <div class="border-2 flex flex-row p-8" style="height:100%;">
                                    <div class="basis-2/5">
                                        <el-image :src="goods1" style="width:100px;height:100px;" />
                                    </div>
                                    <div class="basis-3/5 text-gray-700">
                                        <div class="mt-3 text-orange-600 text-xs text-center">{{ item.desc }}</div>
                                        <div class="mt-3 text-center text-sm">{{ item.title }}</div>
                                        <div class="mt-3 text-center text-sm">RMB：{{ item.price }}</div>
                                    </div>
                                </div>
                            </el-col>
                                                       
                        </el-row>                        
                    </div>
                    <div class="basis-2/5 p-3">
                        <div class="border-2 flex flex-row p-8" style="height:100%;">
                            <div class="basis-3/5 text-gray-700 flex justify-center items-center">
                                <div>
                                    <div class=" text-orange-600 text-sm text-center">{{ bottomGoodsList.desc }}</div>
                                    <div class="mt-3 text-center">{{ bottomGoodsList.title}}</div>
                                    <div class="mt-3 text-center">RMB：{{ bottomGoodsList.price }}</div>
                                </div>
                            </div>
                            <div class="basis-2/5">
                                <el-image :src="baseUrl + bottomGoodsList.image" style="width:250px;height:250px;" />
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </Center>
</template>
<script setup>
import goods1 from "@/assets/imgs/goods1.png";
import goods2 from "@/assets/imgs/goods2.png";
import Center from '../../components/common/Center.vue'
import { goodIndex } from "@/http/api";
import { ref, onMounted } from "vue";
const baseUrl = import.meta.env.VITE_API_URL;
const goodsList = ref([]);
const leftGoodsList = ref([]);
const bottomGoodsList = ref([]);
onMounted(() => {
    getGoodsList();
});

const getGoodsList = async () =>{
    const { data } = await goodIndex();
    goodsList.value = data.good.data;
    leftGoodsList.value = data.left;
    bottomGoodsList.value = data.bottom;

    // const arr = data.bottom.map((el) => {
    //     el.cover = el.image.split(",")[0];
    //     return el;
    // });
    //console.log(leftGoodsList.value.image)
}

</script>